<template>
  <el-menu
        default-active="2"
        :unique-opened="true"
        :router="true"
        text-color="#fff"
        background-color="#2f86d2"
        class="el-menu-vertical-demo"
      >
      <el-submenu index="/home">
        <template slot="title">
          <i class="el-icon-s-home"></i>
          <span class="navLink" slot="title" @click="saveRoute('/')">首页</span>
        </template>
      </el-submenu>
      <el-submenu :index="menu.path" v-for="menu in menuRoutes" :key="menu.path">
        <template slot="title">
          <i :class="menu.meta.icon"></i>
          <span slot="title">{{menu.meta.title}}</span>
        </template>
        <el-submenu :index="String(index)" v-for="(submenu,index) in menu.children" :key="index">
          <template slot="title">
            <span class="navLink"  @click="saveRoute(`${menu.path}/${submenu.path}`,menu,submenu)">
            {{submenu.meta.title}}
            </span>
          </template>
        </el-submenu>
      </el-submenu>
    </el-menu>
</template>

<script>
//静态加载路由作为菜单
// import { menuRoutes } from '@/router'

//从vuex中加载动态菜单
export default {
  data(){
    return {
      
    }
  },
  computed:{
    //侧边栏菜单要从vuex中获取
    menuRoutes(){
      return this.$store.state.admin.admin.routeList;
    }
  },
  methods:{
    saveRoute(url,menu,submenu){
      //1.判断当前要跳转的地址是不是首页
      if(url!='/'){
        //2.如果不是首页，在跳转页面之前先把当前路由信息给保存到vuex中
        let params = {          
          parentRouteTitle:menu.meta.title,
          currentRouteTitle:submenu.meta.title,
          currentRouteURL:url
        }
        this.$store.commit('functions/setCurrentRoute',params)
      }else{
        this.$store.commit('functions/setCurrentRoute',{})
      }
      //3.用push跳转(如果要跳转的地址就是当前地址会报错)
      this.$router.push(url).catch(()=>{})
    }
  }
}
</script>

<style scoped>
.navLink{
  width:90%;
  display: inline-block;
}
.el-submenu__title i{
  color:#fff;
}
</style>